<template>
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header">
            <Searchbar/>
        </div>
        <div class="layui-card-body" style="padding-top:0;">
            <script type="text/html" id="toolbar-head">
                <div class="layui-table-tool-temp">
                    <div class="layui-inline" lay-event="add">
                        <i class="layui-icon layui-icon-add-1"></i>
                    </div>
                    <div class="layui-inline" lay-event="return">
                        <i class="layui-icon layui-icon-return"></i>
                    </div>
                    <div class="layui-inline" lay-event="refresh">
                        <i class="layui-icon layui-icon-refresh"></i>
                    </div>
                </div>
            </script>
            <!-- 业务列表 -->
            <table id="table-list" lay-filter="table-list" lay-data="{id: 'table-list'}"></table>
            <script type="text/html" id="toolbar-cell">
                <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="submit">提交</a>
            </script>
        </div>
        <Details/>
        <Modal/>
    </div>
</template>

<script>
import Searchbar from "@/components/base/Searchbar";
import Modal from "@/components/base/Modal";
import Details from "@/components/base/Details";

export default {
    name: "Acceptance",
    data() {
        return {
            msg: null
        };
    },
    components: {
        Searchbar,
        Modal,
        Details
    },
    computed: {
        businessNo() {
            return this.$store.state.businessNo;
        }
    },
    watch: {
        businessNo: function(data) {
            this.getList();
        },
        deep: true
    },
    mounted() {
        var that = this;
        layui.use(
            ["element", "table", "laypage", "layer", "form", "laydate"],
            function() {
                var element = layui.element;
                var table = layui.table;
                var laypage = layui.laypage;
                var layer = layui.layer;
                var form = layui.form;
                var laydate = layui.laydate;
                element.init();
                form.render();
                laydate.render({
                    elem: "#lease_start_at"
                });
                laydate.render({
                    elem: "#lease_end_at"
                });
                that.getList();
                //头部工具栏事件
                table.on("toolbar(table-list)", function(obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case "add":
                            that.getList();
                            break;
                        case "return":
                            that.getList();                        
                            break;
                        case "refresh":
                            that.getList();
                            break;
                    }
                });
                // 复选框监听事件
                table.on("checkbox(table-list)", function(obj) {
                    // layer.msg(obj.checked ? '选中': '未选中');
                });
                //单元格工具栏事件
                table.on("tool(table-list)", function(obj) {
                    var data = obj.data;
                    var layEvent = obj.event;
                    var tr = obj.tr;
                    if (layEvent === "detail") {
                        // 业务详情
                        table.render({
                            elem: "#details-business",
                            width: "auto",
                            height: 200,
                            url:
                                "https://www.easy-mock.com/mock/5bdd6a772648a72a8d8a72ee/system/details#!method=get",
                            cols: [
                                [
                                    {
                                        field: "id",
                                        title: "ID"
                                    },
                                    {
                                        field: "no",
                                        title: "业务编号",
                                        width: 180
                                    },
                                    {
                                        field: "user_name",
                                        title: "操作员",
                                        width: 80,
                                        templet: "<span>{{d.user.name}}</span>"
                                    },
                                    {
                                        field: "type",
                                        title: "业务类型",
                                        width: 100
                                    },
                                    {
                                        field: "from",
                                        title: "业务来源",
                                        width: 100
                                    },
                                    {
                                        field: "rights",
                                        title: "有无产权",
                                        width: 100
                                    },
                                    {
                                        field: "status",
                                        title: "业务状态",
                                        width: 100
                                    },
                                    {
                                        field: "status",
                                        title: "当期业务步骤",
                                        width: 120
                                    },
                                    {
                                        field: "created_at",
                                        title: "创建时间",
                                        width: 180
                                    },
                                    {
                                        field: "updated_at",
                                        title: "更新时间",
                                        width: 180
                                    }
                                ]
                            ]
                        });
                        // 房屋详情
                        table.render({
                            elem: "#details-house",
                            width: "auto",
                            height: 200,
                            url:
                                "https://www.easy-mock.com/mock/5bdd6a772648a72a8d8a72ee/system/details#!method=get",
                            cols: [
                                [
                                    {
                                        field: "房屋id",
                                        title: "房屋id",
                                        width: 80,
                                        templet:
                                            "<span>{{d.application.building.id}}</span>"
                                    },
                                    {
                                        field: "所在区域",
                                        title: "所在区域",
                                        width: 100,
                                        templet:
                                            "<span>{{d.application.building.district}}</span>"
                                    },
                                    {
                                        field: "所在地址",
                                        title: "所在地址",
                                        width: 200,
                                        templet:
                                            "<span>{{d.application.building.address}}</span>"
                                    },
                                    {
                                        field: "房屋结构",
                                        title: "房屋结构",
                                        width: 100,
                                        templet:
                                            "<span>{{d.application.building.structure}}</span>"
                                    },
                                    {
                                        field: "房屋产权",
                                        title: "房屋产权",
                                        width: 100,
                                        templet:
                                            "<span>{{d.application.building.rights}}</span>"
                                    },
                                    {
                                        field: "备案号",
                                        title: "备案号",
                                        width: 100,
                                        templet:
                                            "<span>{{d.application.no}}</span>"
                                    },
                                    {
                                        field: "登记时间",
                                        title: "登记时间",
                                        width: 180,
                                        templet:
                                            "<span>{{d.application.applied_at}}</span>"
                                    },
                                    {
                                        field: "租赁面积",
                                        title: "租赁面积",
                                        width: 120,
                                        templet:
                                            "<span>{{d.application.lease_area}}</span>"
                                    },
                                    {
                                        field: "年租金",
                                        title: "年租金",
                                        width: 100,
                                        templet:
                                            "<span>{{d.application.lease_price}}</span>"
                                    },
                                    {
                                        field: "租赁用途",
                                        title: "租赁用途",
                                        width: 100,
                                        templet:
                                            "<span>{{d.application.purpose}}</span>"
                                    },
                                    {
                                        field: "租赁开始时间",
                                        title: "租赁开始时间",
                                        width: 120,
                                        templet:
                                            "<span>{{d.application.lease_start_at}}</span>"
                                    },
                                    {
                                        field: "租赁结束时间",
                                        title: "租赁结束时间",
                                        width: 120,
                                        templet:
                                            "<span>{{d.application.lease_end_at}}</span>"
                                    }
                                ]
                            ]
                        });
                        setTimeout(function() {
                            // 出租方详情
                            table.render({
                                elem: "#details-lessor",
                                width: "auto",
                                height: 200,
                                url:
                                    "https://www.easy-mock.com/mock/5bdd6a772648a72a8d8a72ee/system/details#!method=get",
                                cols: [
                                    [
                                        {
                                            field: "单位名称",
                                            title: "单位名称",
                                            width: 180,
                                            templet:
                                                "<span>{{d.application.lessor.unit.name}}</span>"
                                        },
                                        {
                                            field: "营业执照代码",
                                            title: "营业执照代码",
                                            width: 140,
                                            templet:
                                                "<span>{{d.application.lessor.unit.business_certificate_no}}</span>"
                                        },
                                        {
                                            field: "事业单位法人证书代码",
                                            title: "事业单位法人证书代码",
                                            width: 180,
                                            templet:
                                                "<span>{{d.application.lessor.unit.public_institution_no}}</span>"
                                        },
                                        {
                                            field: "联系电话",
                                            title: "联系电话",
                                            width: 120,
                                            templet:
                                                "<span>{{d.application.lessor.unit.tel}}</span>"
                                        },
                                        {
                                            field: "法人姓名",
                                            title: "法人姓名",
                                            width: 100,
                                            templet:
                                                "<span>{{d.application.lessor.unit.legal_person.name}}</span>"
                                        },
                                        {
                                            field: "身份证号码",
                                            title: "身份证号码",
                                            width: 180,
                                            templet:
                                                "<span>{{d.application.lessor.unit.legal_person.id_no}}</span>"
                                        },
                                        {
                                            field: "联系电话",
                                            title: "联系电话",
                                            width: 120,
                                            templet:
                                                "<span>{{d.application.lessor.unit.legal_person.tel}}</span>"
                                        }
                                    ]
                                ]
                            });
                        }, 2000);
                        setTimeout(function() {
                            // 承租方详情
                            table.render({
                                elem: "#details-lessee",
                                width: "auto",
                                height: 200,
                                url:
                                    "https://www.easy-mock.com/mock/5bdd6a772648a72a8d8a72ee/system/details#!method=get",
                                cols: [
                                    [
                                        {
                                            field: "个人姓名",
                                            title: "个人姓名",
                                            width: 100,
                                            templet:
                                                "<span>{{d.application.lessee.members[0].member.name}}</span>"
                                        },
                                        {
                                            field: "身份证号码",
                                            title: "身份证号码",
                                            width: 180,
                                            templet:
                                                "<span>{{d.application.lessee.members[0].member.id_no}}</span>"
                                        },
                                        {
                                            field: "联系电话",
                                            title: "联系电话",
                                            width: 120,
                                            templet:
                                                "<span>{{d.application.lessee.members[0].member.tel}}</span>"
                                        }
                                    ]
                                ]
                            });
                        }, 2000);
                    } else if (layEvent === "edit") {
                        layer.open({
                            type: 1,
                            title: "&nbsp;",
                            area: ["800px", "600px"],
                            shade: 0,
                            content: $("#modal"),
                            end: function() {
                                $("#modal").hide();
                            }
                        });
                    } else if (layEvent === "submit") {
                        that.getList();
                    }
                });
            }
        );
    },
    methods: {
        getList: function() {
            layui.use("table", function() {
                var table = layui.table;
                // 初始化表格
                table.render({
                    elem: "#table-list",
                    title: "受理业务表格",
                    width: "auto",
                    height: 400,
                    autoSort: true,
                    page: true,
                    toolbar: "#toolbar-head",
                    defaultToolbar: ["filter", "print", "exports"],
                    where: { no: 123 },
                    url:
                        "https://www.easy-mock.com/mock/5bdd6a772648a72a8d8a72ee/system/list#!method=get",
                    cols: [
                        [
                            { type: "checkbox", fixed: "left" },
                            {
                                field: "id",
                                title: "ID",
                                width: 70,
                                sort: true,
                                fixed: "left"
                            },
                            {
                                field: "no",
                                title: "业务编号",
                                width: 180
                            },
                            {
                                field: "from",
                                title: "业务来源",
                                width: 100,
                                templet: function(d) {
                                    if (d.from == 1) {
                                        return "窗口录入";
                                    } else {
                                        return "网上申请";
                                    }
                                }
                            },
                            {
                                field: "created_at",
                                title: "创建时间",
                                width: 180,
                                sort: true
                            },
                            {
                                field: "district",
                                title: "房屋区域",
                                width: 100,
                                templet: function(d) {
                                    if (d.application.building.district == 1) {
                                        return "榆阳区";
                                    } else {
                                        return "开发区";
                                    }
                                }
                            },
                            {
                                field: "address",
                                title: "房屋地址",
                                width: 200,
                                templet:
                                    "<span>{{d.application.building.address}}</span>"
                            },
                            {
                                field: "purpose",
                                title: "租赁用途",
                                width: 100,
                                templet: function(d) {
                                    if (d.application.purpose == 1) {
                                        return "住宅";
                                    } else if (d.application.purpose == 2) {
                                        return "商业";
                                    } else {
                                        return "其他";
                                    }
                                }
                            },
                            {
                                field: "lessor",
                                title: "出租方",
                                minWidth: 180,
                                templet: function(d) {
                                    if (d.application.lessor.unit) {
                                        return d.application.lessor.unit.name;
                                    } else {
                                        return d.application.lessee.members[0]
                                            .member.name;
                                    }
                                }
                            },
                            {
                                field: "lessee",
                                title: "承租方",
                                width: 100,
                                templet:
                                    "<span>{{d.application.lessee.members[0].member.name}}</span>"
                            },
                            {
                                field: "classify",
                                toolbar: "#toolbar-cell",
                                title: "操作",
                                width: 180
                            }
                        ]
                    ]
                });
            });
        }
    }
};
</script>

<style scoped>
.layuiadmin-card-header {
    padding: 10px 0 8px;
}
</style>
